<template>
	<view class="agent-host" @click="closeTooltip">
		<!-- :style="{paddingTop: paddingTop} -->
		<view class="agent-host-header" :style="{ height: fixedTop + 'px' }">
			<DistributionNavBar rgb="transparent" :titleWidth="0" leftColor="#fff" title=" " backgroundColor="transparent">
				<template slot="left" class="flex date-box col-center">
					<view class="image-box"><image src="@/static/images/third/icon_nav_back@3x.png" @click="clickBack" /></view>
					<view @click="clickDate" class="flex col-center">
						<text class="date-text">{{ showSelectDate || '全部累计' }}</text>
						<view class="image-box"><image src="@/static/icon/icon_tzdr_date@3x.png" /></view>
					</view>
				</template>
			</DistributionNavBar>
			<view class="host-count">
				<view class="host-count-items flex">
					<view class="count-item">
						<view class="num-box">{{ sumObj.expandNum || 0 }}</view>
						<view class="num-remind">已拓展抖音账号数量(人)</view>
					</view>
					<view class="count-item">
						<view class="num-box" @click.stop="showTooltipMoney">
							{{ sumObj.amount | yuanToWan(true) }}
							<text class="unit-box" v-if="sumObj.amount >= 10000">w</text>
							<view class="tooltip-money" v-if="showToolMoney && sumObj.amount > 0">￥{{ sumObj.amount || 0 }}</view>
						</view>
						<view class="num-remind">达人产生GMV(元)</view>
					</view>
					<view class="host-count-image"><image src="/static/images/third/img_tzdr_bg@2x.png" /></view>
				</view>
				<view class="count-time">对接达人数据更新于{{ sumObj.updateTime || '暂无更新时间' }}</view>
			</view>
			<view class="list-title common-item flex">
				<view class="item-col1">博主达人</view>
				<view class="item-col2">带货分</view>
				<view class="item-col3">粉丝量</view>
				<view class="item-col4">绑定时间</view>
			</view>
		</view>
		<view class="agent-host-list" :style="{ paddingTop: paddingTop }">
			<view class="agent-item flex common-item" v-for="(item, index) in agentList" :key="index">
				<view class="item-col1 line-1" @click.stop="showTooltip(index)">
					<view class="grade-box">Lv{{ item.cargoLevel ? item.cargoLevel : 0 }}</view>
					{{ item.nickName || '博主名称' }}
					<view class="tooltip-box" v-if="showToolIndex === index && item.nickName.length > 7">
						{{ item.nickName || '博主名称' }}
					</view>
				</view>
				<view class="item-col2">
					{{ item.cargoPoints | yuanToWan }}
					<text v-if="item.cargoPoints >= 10000">w</text>
				</view>
				<view class="item-col3">
					{{ item.channelFens | yuanToWan }}
					<text v-if="item.channelFens >= 10000">w</text>
				</view>
				<view class="item-col4">{{ item.createTime || '暂无' }}</view>
			</view>
			<DistributionHint :type="isHintStatus" :top="isHintStatus === 'nodata' ? '100rpx' : 0" />
		</view>

		<!-- <view v-else class="agent-host-empty">
			<image src="/static/images/third/img_nopic@2x.png" />
		</view> -->
		<BottomActionSheet
			v-model="isDatePopup"
			title="选择月份"
			:list="dateList"
			:activeValue="activeValue"
			@changeBottomActionSheet="changeBottomActionSheet"
			customCancle="全部累计"
			@customClickFn="changeBottomActionSheet(1)"
		/>
		<!-- :otherParams="popupOtherParams" -->
	</view>
</template>

<script>
import { defaultImageUrl, isIos, getSystemInfo } from '@/utils';
import DistributionNavBar from '@/components/distributionNavBar/indeHome';
const bankIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);
import BottomActionSheet from '@/components/bottomActionSheet';
import DistributionHint from '@/components/distributionHint';
// 顶部导航 rgba
const speed = 80;
const modelIsIos = isIos();
const fixedTop = Object.freeze((modelIsIos ? 44 : 48) + statusBarHeight);
const { platform, statusBarHeight } = getSystemInfo();
import { agentListUrl, agentGmvDataUrl } from '@/api/third';
export default {
	name: 'agentHost',
	components: {
		DistributionNavBar,
		BottomActionSheet,
		DistributionHint
	},
	computed: {
		paddingTop() {
			return `${statusBarHeight + (platform === 'ios' ? 44 : 48)}px`;
		}
	},
	filters: {
		yuanToWan(val, isMoney = false) {
			if (!val) return isMoney ? 0.0 : 0;
			if ((isMoney && val * 100 >= 1000000) || (!isMoney && val >= 10000)) {
				return (val / 10000).toFixed(2);
			} else {
				return val;
			}
		}
	},
	//
	data() {
		return {
			bankIcon,
			agentList: [
				// {nickName:'111',cargoLevel:1,cargoPoints:100,channelFens:334,createTime:'2019-01-10'}
			],
			configParam: {
				pageIndex: 1,
				pageSize: 20
			},
			showToolIndex: -1,
			isDatePopup: false,
			showToolMoney: false,
			dateList: [],
			popupOtherParams: [],
			activeValue: [],
			agentYears: [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022],
			agentMouths: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
			selectDate: '',
			showSelectDate: '',
			sumObj: { expandNum: 0, amount: 0, updateTime: '' },
			selfAuserId: '',
			isHintStatus: '' // nomore  nodata
		};
	},
	created() {
		console.log('created');
		this.dealDates();
	},
	onLoad(option = {}) {
		console.log(option);
		const { operateId = '' } = option;
		this.selfAuserId = operateId;
		this.getAllData(operateId);
	},
	methods: {
		getAllData(params) {
			this.getAgentList(params);
			this.agentGmv(params);
		},
		getAgentList(params = '') {
			uni.showLoading({
				title: '加载中'
			});
			const { selfAuserId = '', selectDate = '', configParam, agentList } = this;
			agentListUrl({ expandDate: selectDate, operateId: params || selfAuserId, ...configParam })
				.then((res = {}) => {
					const { code = 0, data = {} } = res;
					if (code !== 200) {
						uni.showToast({ title: '数据获取错误', icon: 'none' });
						return;
					}
					if (configParam.pageIndex === 1) {
						uni.stopPullDownRefresh();
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
						this.agentList = data?.data || [];
					} else {
						this.agentList = [...agentList, ...data?.data] || [];
					}

					uni.hideLoading();
					this.isHintStatus =
						configParam.pageIndex === 1 && !data?.data.length
							? 'nodata'
							: data?.data.length < configParam.pageSize
							? 'nomore'
							: '';
				})
				.catch((err = {}) => {
					console.log(err);
					uni.hideLoading();
				});
		},
		async agentGmv(params = '') {
			const { selfAuserId = '', selectDate = '' } = this;
			let result = await agentGmvDataUrl({ expandDate: selectDate, operateId: params || selfAuserId });
			const { code = 0, data = {} } = result || {};
			if (code !== 200) {
				uni.showToast({ title: 'GMV数据获取错误', icon: 'none' });
				return;
			}
			const { expandNum = 0, amount = 0, updateTime = '' } = data;
			this.sumObj = { expandNum, amount, updateTime };
		},
		showTooltip(index) {
			this.showToolIndex = index;
		},
		clickBack() {
			uni.navigateBack();
		},
		closeTooltip() {
			this.showToolMoney = false;
			this.showToolIndex = -1;
		},
		clickDate() {
			this.isDatePopup = true;
		},
		showTooltipMoney() {
			this.showToolMoney = !this.showToolMoney;
		},
		changeBottomActionSheet(value) {
			console.log(value);
			if (value && value.length) {
				this.selectDate = value[0].value + value[1].value;
				this.showSelectDate = value[0].value + '年' + value[1].label;
				this.configParam.pageIndex = 1;
				this.getAllData();
			} else {
				if (value === 1) {
					this.selectDate = '';
					this.showSelectDate = '';
					this.configParam.pageIndex = 1;
					this.getAllData();
				}
				console.log('cancle');
				return;
			}
		},
		dealDates() {
			const d = new Date();
			const nowYear = d.getFullYear();
			let dataList = [];
			for (let i = 2015; i < nowYear + 1; i++) {
				dataList.push({
					label: i + '年',
					value: String(i),
					children: this.agentMouths.map((item) => {
						return { label: item + '月', value: item };
					})
				});
			}
			this.dateList = dataList;
			console.log(dataList);
		}
	},
	onReachBottom() {
		const {
			isHintStatus,
			configParam: { pageIndex }
		} = this;
		console.log(1, isHintStatus);
		if (isHintStatus) {
			return;
		}
		this.isHintStatus = 'loading';
		this.configParam.pageIndex = pageIndex + 1;
		this.getAgentList();
	}
	// onPullDownRefresh() {
	// 	console.log('xia la shua xin');
	// 	thiss.getAllData();
	// }
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.agent-host {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	min-height: 100vh;
	@include Db_iosBottomDistance(0rpx);
	// common
	.common-item {
		width: 100%;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding: 24rpx 0;
		position: relative;
		.item-col1 {
			width: calc(100% - 400rpx);
			margin-right: 10rpx;
			text-align: left;

			.grade-box {
				padding: 4rpx 10rpx;
				background: #f3ca94;
				font-size: 20rpx;
				font-weight: 500;
				color: #7d531b;
				display: inline-block;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}
		.item-col2 {
			width: 120rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
			text-align: left;
		}
		.item-col3 {
			width: 100rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
			text-align: left;
		}
		.item-col4 {
			width: 160rpx;
			flex-shrink: 0;
			text-align: right;
		}
	}
	// 242 + 92 = 334 + top
	&-header {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		background: linear-gradient(131deg, #ffa649 0%, #ff7e0a 100%);
		width: 100%;
		.date-box {
			color: #fff;
			font-size: 40rpx;
			.date-text {
				margin: 0 8rpx 0 20rpx;
			}
			.image-box {
				width: 40rpx;
				height: 40rpx;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
		.host-count {
			width: 100%;
			height: 242rpx;
			padding: 36rpx 20rpx 34rpx;
			color: #fff;
			position: relative;
			&-items {
				.count-item {
					width: 50%;
					position: relative;
					text-align: center;
					z-index: 5;
					.num-box {
						font-size: 52rpx;
						font-family: UDC1.04-Bold, UDC104;
						font-weight: bold;
						margin-bottom: 12rpx;
						position: relative;
						display: inline-block;
					}
					.num-remind {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.8);
					}
					.unit-box {
						font-size: 36rpx;
					}
				}
				.count-item:first-child::after {
					position: absolute;
					content: '';
					top: 0;
					right: 0;
					width: 1rpx;
					height: 100%;
					background: rgba(255, 255, 255, 0.2);
				}
			}
			.count-time {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				margin-top: 36rpx;
				text-align: center;
				width: 100%;
				color: rgba(255, 255, 255, 0.5);
			}
			&-image {
				width: 300rpx;
				position: absolute;
				height: 240rpx;
				right: 40rpx;
				bottom: -60rpx;
				z-index: 0;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.list-title {
			line-height: 92rpx;
			padding: 0 24rpx;
			height: 92rpx;
			background: #ffffff;
			box-shadow: inset 0px 0px 0px 0px #f6f6f6;
			border-radius: 16rpx 16rpx 0px 0px;
			font-weight: bold;
			border-bottom: 1rpx solid #f6f6f6;
		}
	}
	&-list {
		margin-top: 334rpx;
		padding: 24rpx;
		background: #ffffff;
		height: 100%;
		overflow-y: scroll;
		min-height: calc(100vh - 334rpx);
	}
	&-empty {
		width: 480rpx;
		height: 320rpx;
		margin: 630rpx auto 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.tooltip-box,
.tooltip-money {
	position: absolute;
	top: 70rpx;
	left: 70rpx;
	background: rgba(0, 0, 0, 0.9);
	box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
	border-radius: 16rpx;
	z-index: 99;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	padding: 10rpx 14rpx;
	max-width: 600rpx;
	white-space: pre-wrap;
}
.tooltip-box::before,
.tooltip-money::before {
	position: absolute;
	content: '';
	top: -12rpx;
	left: 30rpx;
	width: 0;
	height: 0;
	border-right: 20rpx solid transparent;
	border-left: 20rpx solid transparent;
	border-bottom: 20rpx solid rgba(0, 0, 0, 0.9);
}
.tooltip-money {
	top: 15rpx;
	left: -100%;
}
.tooltip-money::before {
	border-left: 20rpx solid rgba(0, 0, 0, 0.9);
	border-top: 20rpx solid transparent;
	border-bottom: 20rpx solid transparent;
	top: 10rpx;
	left: calc(100% - 10rpx);
}
</style>
